<template>
	<view class="page-content">
		<u-navbar title="估值" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder>
			<view class="navbar-right" slot="right">
				<u-icon size="25" class="order-icon" name="/static/images/evaluate/icon_evaluate-order.png"></u-icon>
				<u-icon size="30" class="news-icon" name="/static/images/evaluate/icon_evaluate-news.png"></u-icon>
			</view>
		</u-navbar>
		
		<view class="container">
			<view class="container-top">
				<view class="containTop-title">
					<view class="top-title1">团体标准T/GAC17-2022《翡翠商贸术语和名称》</view>
					<view class="top-title2">观石(佛山市)检测技术服务有限公司</view>
					<view class="top-title3">企业标准Q/GIDF-J001-2021《翡翠分级》</view>
				</view>
				
				<view class="containTop-text">
					GID翡翠分级，从种，水，质地，颜色，净度和工艺六个方面对翡翠进行级别划分首次提出使用"种"等级，使得贴近市场，利于市场应用
				</view>
				
				<view class="containTop-narbar">
					<view class="narbar-item" v-for="(item,index) in narbarList" :class="{'item-even':index%2 !=0}">
						<view class="narItem-left">0{{index+1}}</view>
						<view class="narItem-right">{{item.text}}</view>
					</view>
				</view>
			</view>
			
			<view class="container-bottom">
				<view class="bottom-sort">
					<view class="bottom-title">
						<u-icon name="/static/images/evaluate/icon_evaluate-sign.png" size="16"></u-icon>
						<view class="bottom-text">种</view>
					</view>
					
					<view class="sort">
						<view class="sort-item" v-for="(item,index) in sortList" :key="index">
							<view class="sortItem-left">
								<u-avatar size="44" :src="item.sortAvatar"></u-avatar>
								<view class="sortItem-leftText">{{item.sortName}}</view>
							</view>
							<view class="sortItem-right">
								<view class="sortItem-rightTitle">{{item.sortTitle}}</view>
								<u-line color="#999" class="line"></u-line>
								<view class="sortItem-rightText">{{item.sortText}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="bottom-water">
					<view class="bottom-title">
						<u-icon name="/static/images/evaluate/icon_evaluate-sign.png" size="16"></u-icon>
						<view class="bottom-text">水</view>
					</view>
					
					<view class="water">
						<view class="water-title">
							透明度：翡翠的可见光的透过程度
						</view>
						<view class="water-content">
							<view class="water-item" v-for="(item,index) in waterData" :key="index">
								<u-avatar size="44" :src="item.waterImg"></u-avatar>
								<view class="water-detail">{{item.waterText}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="bottom-texture">
					<view class="bottom-title">
						<u-icon name="/static/images/evaluate/icon_evaluate-sign.png" size="16"></u-icon>
						<view class="bottom-text">质地</view>
					</view>
					
					<view class="texture">
						<view class="texture-title">
							由翡翠中矿物的颗粒大小，将翡翠质地分为4个级别
						</view>
						<view class="texture-content">
							<view class="sort-item" v-for="(item,index) in textureData" :key="index">
								<view class="sortItem-left">
									<u-avatar size="44" :src="item.sortAvatar"></u-avatar>
									<view class="sortItem-leftText">{{item.sortName}}</view>
								</view>
								<view class="sortItem-right">
									<view class="sortItem-rightTitle">{{item.sortTitle}}</view>
									<u-line color="#999" class="line"></u-line>
									<view class="sortItem-rightText">{{item.sortText}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				// 导航数据
				narbarList:[
					{ text:'种' },
					{ text:'水' },
					{ text:'质地' },
					{ text:'颜色' },
					{ text:'净度' },
					{ text:'工艺' },
				],
				// 种data
				sortList:[
					{
						sortAvatar:"/static/images/evaluate/avatar-lohan1.jpg",
						sortName:'玻璃种',
						sortTitle:'透明，极细-细粒',
						sortText:'肉眼难见内部特征，刚性足，难见“翠性”'
					},
					{
						sortAvatar:"/static/images/evaluate/avatar-lohan2.jpg",
						sortName:'玻璃种',
						sortTitle:'透明，极细-细粒',
						sortText:'肉眼难见内部特征，刚性足，难见“翠性”'
					},
					{
						sortAvatar:"/static/images/evaluate/avatar-lohan3.jpg",
						sortName:'玻璃种',
						sortTitle:'透明，极细-细粒',
						sortText:'肉眼难见内部特征，刚性足，难见“翠性”'
					},
					{
						sortAvatar:"/static/images/evaluate/avatar-lohan4.jpg",
						sortName:'玻璃种',
						sortTitle:'透明，极细-细粒',
						sortText:'肉眼难见内部特征，刚性足，难见“翠性”'
					},
				],
				// 水 data
				waterData:[
					{
						waterImg:'/static/images/evaluate/img_evaluate-waterImg1.jpg',
						waterText:'透明/W1'
					},
					{
						waterImg:'/static/images/evaluate/img_evaluate-waterImg2.jpg',
						waterText:'透明/W2'
					},
					{
						waterImg:'/static/images/evaluate/img_evaluate-waterImg3.jpg',
						waterText:'透明/W3'
					}
				],
				// 质地 data
				textureData:[
					{
						sortAvatar:"/static/images/evaluate/img_evaluate-textureImg1.jpg",
						sortName:'极细',
						sortTitle:'TEXTURE1',
						sortText:'质地非常细腻，10倍放大镜下难见矿物颗粒，可见雾状外观'
					},
					{
						sortAvatar:"/static/images/evaluate/img_evaluate-textureImg2.jpg",
						sortName:'较细',
						sortTitle:'TEXTURE2',
						sortText:'质地较为细腻，10倍放大镜下可见矿物颗粒，肉眼难见'
					},
					{
						sortAvatar:"/static/images/evaluate/img_evaluate-textureImg3.jpg",
						sortName:'较粗',
						sortTitle:'TEXTURE3',
						sortText:'质地较为细腻，肉眼可见矿物颗粒，可见“翠性”'
					},
					{
						sortAvatar:"/static/images/evaluate/img_evaluate-textureImg4.jpg",
						sortName:'粗',
						sortTitle:'TEXTURE4',
						sortText:'质地较为细腻，肉眼可见矿物颗粒，粒径大小不均匀，“翠性”明显'
					},
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content{
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		.navbar-right{
			display: flex;
			align-items: center;
			.order-icon{
				padding: 0 $uni-spacing-row-sm;
			}
			.news-icon{
				padding: 0 $uni-spacing-row-sm;
			}
		}
		
		.container{
			.container-top{
				background-color: $gs-jpBg;
				padding: $uni-spacing-col-base $uni-spacing-row-lg;
				border-radius: 10px;
				text-align: center;
				.containTop-title{
					.top-title1,.top-title2,.top-title3{
						font-size: $uni-font-size-base;
						color: $uni-text-color;
						padding: $uni-spacing-col-sm 0;
					}
				}
				.containTop-text{
					font-size: $gs-font-sm;
					color: $uni-text-color-placeholder;
					padding: $uni-spacing-col-sm 0;
				}
				.containTop-narbar{
					padding: $uni-spacing-col-base 0;
					display: grid;
					grid-gap: $uni-spacing-row-base 20px;
					grid-template-columns: 1fr 1fr;
					.narbar-item{
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: $gs-bg-grey;
						height: 35px;
						border-radius: 25px 2px 2px 25px;
						.narItem-left{
							color: $uni-text-color-placeholder;
							padding: 0 $uni-spacing-row-sm;
							text-align: left;
						}
						.narItem-right{
							color: $uni-text-color;
							width: 32px;
							text-align: left;
						}
					}
					// 奇数
					.item-odd{
						
					}
					.item-even{
						border-radius: 2px 25px 25px 2px;
					}
				}
			}
			.container-bottom{
				background-color: $gs-jpBg;
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				margin: $uni-spacing-col-base 0;
				border-radius: 10px;
				.bottom-title{
					display: flex;
					align-items: center;
					padding: $uni-spacing-col-sm $uni-spacing-row-base;
					.bottom-text{
						padding: 0 $uni-spacing-row-sm;
						color: $uni-text-color;
					}
				}
				.bottom-sort,.bottom-texture{
					.sort,.texture-content{
						.sort-item{
							display: flex;
							padding: $uni-spacing-col-lg $uni-spacing-row-base;
							.sortItem-left{
								display: flex;
								flex-direction: column;
								align-items: center;
								.sortItem-leftText{
									font-size: $uni-font-size-sm;
									color: $uni-text-color;
									padding: $uni-spacing-col-sm 0;
								}
							}
							.sortItem-right{
								width: 100%;
								margin: 0 0 0 $uni-spacing-row-lg;
								padding: $uni-spacing-col-lg $uni-spacing-row-lg;
								background-color: $gs-bg;
								border-radius: 8px;
								.sortItem-rightTitle{
									font-size: $uni-font-size-sm;
									color: $uni-text-color;
								}
								.line{
									padding: $uni-spacing-col-sm 0;
								}
								.sortItem-rightText{
									font-size: $uni-font-size-sm;
									color: $uni-text-color-grey;
									padding: 2px 0;
								}
							}
						}
					}
					
				}
				
				.bottom-water,.bottom-texture{
					.water,.texture{
						.water-title,.texture-title{
							width: fit-content;
							margin: $uni-spacing-col-base auto;
							padding: $uni-spacing-col-base $uni-spacing-row-lg;
							background-color: $gs-btn;
							border-radius: $uni-border-radius-lg;
							color: $uni-text-color-inverse;
							font-size: $uni-font-size-base;
						}
						.water-content{
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: $uni-spacing-col-base 0;
							padding: $uni-spacing-col-base 0;
							.water-item{
								display: flex;
								flex-direction: column;
								align-items: center;
							}
							.water-detail{
								font-size: $uni-font-size-sm;
								color: $uni-text-color-grey;
								padding: $uni-spacing-col-sm 0;
							}
						}
					}
				}
			
				
			}
		}
	}
</style>